<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>FOSSASIA Webtweets</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="css/elegant-icons.min.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="css/theme.css" rel="stylesheet" type="text/css" media="all"/>
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,300' rel='stylesheet' type='text/css'>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/smooth-scroll.min.js"></script>
        <script src="js/tweets.js"></script>
        <script src="js/loklak-fetcher.js"></script>
    </head>
    <body onload="datafetcher()">
        <div class="nav-container"></div>
        <div class="main-container">
            <section class="subscribe-1">

                <div class="container">
                    <div class="row">
                        <div class="col-sm-12 text-center">
                            <h1 class="large-h1 text-white">Twitter Updates</h1>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 text-center">
                            <div class="twitter-feed">
                                <i class="icon social_twitter text-white"></i>
                <!-- Change the data-count to desired number of circulating tweets and data-query
                     to the search terms you desire. -->
                                <div class="tweets-feed" id="tweets" data-count=50 data-query="fossasia #gci">
                                    <div class="arrow-up"></div>
                                    <p id="tweet" class="tweet">
                    Loading...
                  </p>
                  <div class="panel-footer">
                    <span id="tweet-info">Fetching tweets...</span>
                  </div>
                                </div>
                                <div class="btn" id="previous"onclick="lastTweet()">
                                    &#8592; &nbsp; Previous Tweet!
                                </div>
                                <div class="btn" id="next"onclick="nextTweet()">
                                    Next Tweet! &nbsp; &#8594;
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="footer">
                            <div class="col-sm-12 text-center">
                                <div class="top-border">
                                    <p class="text-white">This WebApp uses the
                                    <a href="http://loklak.org">loklak Server</a> to fetch the Tweets</p>
                                    <p class="text-white">Follow
                                    <a href="http://fossasia.org" target="default">@fossasia</a>
                                    &nbsp;for more updates</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
        <a href="https://github.com/fossasia/fossasia-loklak-webtweets">
            <img style="z-index:1;position: absolute; top: 0; right: 0; border: 0;"
                 src="fork.png"
                 alt="Fork me on GitHub"
                 data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png">
        </a>
    </body>
</html>
